<template>
  <div class="mine">
    <div class="banner">
      <img @click="$router.push({path: '/setting'})" class="right-action" slot="right" src="../../assets/imgs/mine/icon-setting@2x.png" alt="">
      <div class="user-info">
        <div class="avator">
          <img :src="mineData.avatar" alt="">
        </div>
        <div class="name">
          {{mineData.nickname}}
        </div>
        <div class="watch">
          关注  {{mineData.follow_num}}   |  粉丝  {{mineData.fans_num}}
        </div>
      </div>
    </div>
    <div class="money">
      <div class="money-item">
        <div class="num">{{mineData.pre_balance}}元</div>
        <div class="label">账户余额</div>
      </div>
      <div class="money-item">
        <div class="num">{{mineData.balance}}元</div>
        <div class="label">可提现金额</div>
      </div>
      <div class="money-item">
        <div class="num">{{mineData.bonus_price}}元</div>
        <div class="label">中奖金额</div>
      </div>
      <div class="menu">
        <div class="menu-item" @click="$router.push({ path: '/mine/recharge' })">
          <img src="../../assets/imgs/mine/chongzhi.png" alt="">
          充值
        </div>
        <div class="menu-item" @click="$router.push({ path: '/bank/list' })">
          <img src="../../assets/imgs/mine/tixian.png" alt="">
          提现
        </div>
      </div>
      <div class="menu">
        <div class="menu-item" @click="$router.push({path: '/betting/record'})">
          <img src="../../assets/imgs/mine/touzhujilu.png" alt="">
          投注记录
        </div>
        <div class="menu-item" @click="$router.push({path: '/mine/message'})">
          <img src="../../assets/imgs/mine/xiaoxi.png" alt="">
          消息中心
        </div>
        <div class="menu-item" @click="$router.push({path: '/mine/goods'})">
          <img src="../../assets/imgs/mine/youhuiquan.png" alt="">
          我的物品
        </div>
        <div class="menu-item" @click="$router.push({path: '/mine/activity'})">
          <img src="../../assets/imgs/mine/liwu.png" alt="">
          优惠活动
        </div>
        <div class="divider"></div>
      </div>
      <div class="menu">
        <div class="menu-item" @click="$router.push({path: '/mine/invite'})">
          <img src="../../assets/imgs/mine/haoyou.png" alt="">
          邀请好友
        </div>
        <div class="menu-item" @click="handleService">
          <img src="../../assets/imgs/mine/kefu.png" alt="">
          联系客服
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Divider } from 'vux';
import { mapActions } from 'vuex';
export default {
  components: {
    Divider
  },
  data () {
    return {
      mineData: {
        // avatar: 'http://img.try255.com/ac953e6bde51ab1ac806bc8c1fcff4f5?x-oss-process=image/quality,q_95',
        // balance: '23213.00',
        // bonus_price: '0.00',
        // fans_num: '1',
        // follow_num: '1',
        // last_login_time: '2019-02-13 17:05:26',
        // mobile: '13067870772',
        // nickname: '嘻嘻啊',
        // pre_balance: '0.00',
        // status: '1'
      }
    }
  },
  mounted () {
    this.getUseInfo();
  },
  methods: {
    ...mapActions({
      getMineInfo: 'mine/mineInfo'
    }),
    getUseInfo () {
      this.getMineInfo({}).then(res => {
        if (res) {
          this.mineData = res;
        }
      });
    },
    handleService () {
      this.$vux.toast.text('如您在使用本站时、遇到任何问题请联系您的代理员');
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../assets/styles/mixins.less';
.mine{
  .banner {
    height: 2.72rem;
    overflow: hidden;
    .right-action {
      position: absolute;
      top: 0.05rem;
      right: 0;
      padding: 0.2rem;
      width: 0.44rem;
      height: 0.44rem;
      z-index: 100;
    }
    .user-info {
      position: absolute;
      background: #D44743;
      width: 100%;
      height: 2.32rem;
      text-align: center;
      left: 0;
      padding-top: 0.4rem;
      .avator {
        img {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 50%;
        }
      }
      .name {
        margin-top: 0.2rem;
        color: #FFFFFF;
        font-size: 0.3rem;
        // height: 0.4rem;
      }
      .watch {
        margin-top: 0.13rem;
        color: #FFFFFF;
        font-size: 0.24rem;
        // height: 0.32rem;
      }
    }
  }
  .money {
    background: #FFFFFF;
    height: 1.2rem;
    .money-item {
        display: inline-block;
        width: 32%;
        height: 0.84rem;
        margin-top: 0.18rem;
        margin-bottom: 0.18rem;
        text-align: center;
        &:nth-child(2) {
          border-left: 0.01rem solid #d2d2d2;
          border-right: 0.01rem solid #d2d2d2;
        }
      .num{
        color: #D44743;
        font-size: 0.32rem;
        margin-bottom: 0.08rem;
        height: 0.45rem;
        line-height: 0.45rem;
      }
      .label{
        color: #999999;
        font-size: 0.24rem;
        height: 0.33rem;
        line-height: 0.33rem;
      }
    }
  }
  .menu {
    position: relative;
    background: #FFFFFF;
    margin-top: 0.2rem;
    font-size: 0;
    .border-1px-top(#d2d2d2);
    .border-1px-bottom(#d2d2d2);
    .divider {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
      background: #d2d2d2;
      // .border-1px-bottom(#d2d2d2);
    }
    .menu-item {
      position: relative;
      display: inline-block;
      width: 50%;
      height: 1.2rem;
      line-height: 1.2rem;
      font-size: 0.28rem;
      &:nth-child(odd)::after {
        content: '';
        display: block;
        position: absolute;
        top: 0.3rem;
        right: 0;
        width: 1px;
        height: 0.6rem;
        background: #d2d2d2;
        transform: scaleX(0.5);
      }
      img {
        width: 0.4rem;
        margin-left: 0.5rem;
        margin-right: 0.32rem;
      }
    }
  }
}
</style>
